<template>
    <div class="home-wrapper">
        <main>
            <Community></Community>
        </main>
        <div>
        <van-tabbar 
        v-model="active"
        active-color="#000"
        inactive-color="#ccc"
        >
        <van-tabbar-item>
          <span>推荐</span>
          <template #icon="props">
            <svg t="1628768241814" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12905" width="22" height="22"><path d="M753.963821 930.99477c-9.950629 0-19.378349-2.618641-27.234271-7.855922L509.381359 791.681864 277.368168 906.903072c-17.282618 8.379854-38.232766 6.808056-53.94461-4.189416s-23.043832-29.852912-18.854417-47.659463l54.991452-244.582461L81.493036 443.924555c-13.617136-12.56927-18.330484-31.94762-12.045337-49.230238 6.285147-16.759709 23.043832-29.328979 41.898249-31.423687l231.489258-25.662473L467.48311 118.164237c8.903787-15.711843 26.186406-25.662473 45.564755-25.139563s36.137035 10.998495 44.51689 27.234271l109.459994 217.34819 245.106394 25.662473c19.378349 2.094708 35.614126 14.141068 42.422182 31.423687 6.285147 17.282618 1.570775 36.660968-12.045337 49.230238L791.671631 584.808236c-9.426697 8.903787-24.615631 8.903787-34.042327 0-8.903787-8.903787-8.903787-23.043832 0.523933-31.94762l150.310378-140.883681c0.523933-0.523933 1.047866-1.570775 0.523933-2.618641 0-0.523933-1.047866-1.047866-2.094708-1.570775l-271.816732-27.758204L514.094708 139.637294c-0.523933-1.047866-1.047866-1.570775-2.094708-1.570775s-2.094708 0.523933-2.094708 1.047866L373.73496 380.029316l-256.627798 27.758204c-1.047866 0.523933-2.094708 1.047866-2.094708 1.570775-0.523933 1.047866 0 2.094708 0.523933 2.618641l196.399065 183.829795-60.228733 268.674159c-0.523933 0.523933 0 1.570775 0.523933 2.094708 1.047866 0.523933 2.094708 0.523933 3.142573 0L512 739.832985l240.392022 145.597029 1.570775 0.523933 1.570775-0.523933c1.047866-0.523933 1.047866-1.570775 1.047866-2.618641L632.457466 523.531638c-4.189416-11.522428 2.618641-24.615631 15.711843-28.281113 12.56927-3.666506 25.662473 2.618641 29.852912 14.663978l124.123972 359.279736c6.285147 18.854417-0.523933 39.803541-17.283642 51.848878C775.959787 927.328263 764.961292 930.99477 753.963821 930.99477zM374.782825 560.192605c-6.285147 0-12.045337-2.618641-16.759709-6.808056l-71.227228-66.51388c-9.426697-8.379854-9.426697-23.043832 0-31.423687 9.426697-8.903787 24.615631-8.903787 34.042327-0.523933l70.703295 66.51388c9.426697 8.903787 9.426697 23.043832 0 31.94762C386.828163 557.573965 381.066949 560.192605 374.782825 560.192605z" :fill="props.active | color" p-id="2064"></path><path d="M303.616 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2065"></path><path d="M516.608 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2066"></path><path d="M729.6 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="12906"></path></svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>目的地</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
           <svg t="1628768597142" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13705" width="22" height="22"><path d="M513.2 56.6c-164 0-296.9 131-296.9 292.6 0 50.2 12.8 97.4 35.4 138.6 37.7 69 166.6 266.1 228.3 359.6 29.8 27.9 59 6.4 66.5 0 61.3-93.3 189.3-289.6 227.3-357.6 23.3-41.7 36.5-89.7 36.5-140.6-0.2-161.6-133.1-292.6-297.1-292.6z m214.2 413.6c-36.1 61-163.5 264.3-202.7 326.8-8.2 2.9-15.9 2.5-23 0-38.9-62.3-165.5-264.9-201.8-325.2-21.7-36.1-34.2-78.2-34.2-123.1 0-134 110.8-242.7 247.4-242.7s247.4 108.6 247.4 242.7c0.1 44.3-12 85.8-33.1 121.5z"  :fill="props.active | color" p-id="2064"></path><path d="M303.616 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2065"></path><path d="M516.608 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2066"></path><path d="M729.6 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color"  p-id="13706"></path><path d="M513.2 477.7c-70.8 0-128.4-57.6-128.4-128.4s57.6-128.4 128.4-128.4 128.4 57.6 128.4 128.4S584 477.7 513.2 477.7z m0-208.7c-44.3 0-80.3 36-80.3 80.3s36 80.3 80.3 80.3 80.3-36 80.3-80.3-36-80.3-80.3-80.3zM511.9 969.6c-163.4 0-286.6-59.6-286.6-138.7 0-46.1 42.4-87.2 116.4-112.7 11.5-4 24.1 2.1 28 13.6 4 11.5-2.1 24.1-13.6 28-53.5 18.5-86.7 45.7-86.7 71.1 0 44.7 99.6 94.6 242.5 94.6s242.5-49.9 242.5-94.6c0-25.4-33.3-52.6-86.8-71.1-11.5-4-17.6-16.5-13.6-28 4-11.5 16.5-17.6 28-13.6 74 25.5 116.5 66.7 116.5 112.8 0 78.9-123.2 138.6-286.6 138.6z"  :fill="props.active | color" p-id="2064"></path><path d="M303.616 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2065"></path><path d="M516.608 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2066"></path><path d="M729.6 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color"  p-id="13707"></path></svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>社区</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
            <svg t="1628767574777" class="icon" viewBox="0 0 1061 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10692" width="22" height="22"><path d="M712.806448 420.368672l-54.831117 0c0 70.663249-57.276345 127.939594-127.934762 127.939594s-127.94636-57.276345-127.94636-127.939594l-54.835949 0c0 100.943494 81.840748 182.770711 182.782309 182.770711S712.806448 521.312166 712.806448 420.368672z" :fill="props.active | color" p-id="2064"></path><path d="M303.616 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2065"></path><path d="M516.608 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2066"></path><path d="M729.6 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="10693"></path><path d="M1060.075341 610.664502c0-92.762126-51.845618-173.453712-128.274001-215.088325C928.280404 176.543592 749.907239 0 530.039604 0c-219.891798 0-398.292025 176.57742-401.774301 395.645765C51.836919 437.297774 0 517.949735 0 610.664502c0 113.223762 77.376513 208.256181 182.38508 236.416906L127.453448 1023.516753l55.317263 0 18.281227-54.831117 49.456445-164.873182c-1.285437 0.024162-2.476157 0.378866-3.768359 0.378866-105.987624 0-191.905042-85.921284-191.905042-191.91374 0-62.966093 30.742229-118.346178 77.58141-153.33808 20.784445 146.459545 120.307194 267.26255 254.415917 318.458684l-59.16584 191.286486 0.027062 0-16.985159 54.831117 54.831117 0 18.284126-54.831117 78.612659-226.016468c-159.411526-31.471932-279.664597-171.934384-279.664597-340.573025 0-191.792929 155.47983-347.26406 347.268893-347.26406s347.258261 155.471132 347.258261 347.26406c0 168.638641-120.242439 309.102059-279.653965 340.573025l78.612659 226.016468 18.270596 54.831117 54.83305 0L732.228138 968.685637l0.169136 0-59.186137-191.298084c134.144483-51.200966 233.697193-172.026201 254.45361-318.530205 46.86141 34.988036 77.619103 90.407747 77.619103 153.421199 0 105.992457-85.841065 191.91374-191.744604 191.91374-1.3009 0-2.503218-0.356636-3.797353-0.383698l49.420685 164.877048-0.140142 0 18.274462 54.831117 55.388783 0-54.882341-176.42568C982.741353 818.94098 1060.075341 723.898896 1060.075341 610.664502z" :fill="props.active | color" p-id="2064"></path><path d="M303.616 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2065"></path><path d="M516.608 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2066"></path><path d="M729.6 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="10694"></path></svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>我的</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
           <svg t="1628768731864" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15248" width="22" height="22"><path d="M839 392.4c0-180.7-147-327.6-327.6-327.6s-327.6 147-327.6 327.6c0 145.9 95.9 269.7 227.9 312-67.5 35.9-113.5 106.8-113.5 188.4v67.3h426.4l0.1-27c0.1-18.9 0.1-24.5 0-30.1v-10.2c0-81.6-46.1-152.6-113.5-188.4C743.1 662.1 839 538.3 839 392.4zM670.4 575.8c-5.5 0-11.1-1.7-15.9-5.2-12.1-8.8-14.8-25.7-6-37.8 111.2-153.2 6.3-273.5 1.8-278.6-10-11.1-9-28.3 2.1-38.3 11.1-10 28.3-9 38.3 2.1 1.4 1.6 138.3 158.3 1.8 346.5-5.4 7.4-13.7 11.3-22.1 11.3z" :fill="props.active | color" p-id="2064"></path><path d="M303.616 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2065"></path><path d="M516.608 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="2066"></path><path d="M729.6 471.04m-54.272 0a54.272 54.272 0 1 0 108.544 0 54.272 54.272 0 1 0-108.544 0Z" :fill="props.active | color" p-id="15249"></path></svg>
          </template>
        </van-tabbar-item>
      </van-tabbar>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)

import Community from './community/Community'
export default {
    components:{
        Community
    },
    data() {
        return {
            active: 0
        }
    },
    filters: {
    color(value) {
      return value ? '#000' : '#ccc'
    }
  }
}
</script>

<style lang='stylus' scoped>
.home-wrapper
 height 100%
</style>